<template>
  <!-- 商品信息 -->
  <div class="audio-item">
    <van-card
      :desc="details.writer"
      :title="details.title"
      :thumb="details.imgUrl"
    >
      <template #bottom>播放量:{{ details.plays }}万</template>
    </van-card>
  </div>
  <!-- 播放进度条 -->
  <div class="play">
    <div class="audio-slider">
      <span class="pres15 jump"></span>
      <van-slider v-model="value" active-color="#ee0a24" class="slider">
        <template #button>
          <div class="custom-button">{{ value }}/35:51</div>
        </template>
      </van-slider>
      <span class="after15 jump"></span>
    </div>
    <div class="play-btn">
      <ul>
        <li>
          <img src="../../assets/imgs/detailspage_slices/定时.png" alt="" />
          定时
        </li>
        <li>
          <img src="../../assets/imgs/detailspage_slices/倍速.png" alt="" />
          倍速
        </li>
        <li class="palybtn">
          <img src="../../assets/imgs/detailspage_slices/播放.png" alt="" />
        </li>
        <li>
          <img src="../../assets/imgs/detailspage_slices/下载.png" alt="" />下载
        </li>
        <li>
          <img
            src="../../assets/imgs/detailspage_slices/加入列表.png"
            alt=""
          />加入列表
        </li>
      </ul>
    </div>
  </div>
  <div class="advs">
    <!-- 广告图片 -->
    <img
      src="../../assets/imgs/detailspage_slices/窗边的小豆豆@2x.png"
      alt=""
    />
  </div>

  <div class="article" :style="{ height: height }" :isopen="heightStatus">
    <!-- 内容部分 -->
    <h1>-2016年的第一本书-</h1>
    <!-- 书籍封面 -->
    <img :src="details.imgUrl" alt="" class="books" />
    <!-- 书记名 -->
    <h3>《{{ details.title }}》</h3>
    <!-- 荐语 -->
    <!-- <div>
      <span class="litag"></span>
      <p></p>
    </div> -->
    <!-- 作者简介 -->
    <div>
      <span class="litag"></span>
      <!-- 作者肖像 -->
      <img :src="details.imgUrl" alt="" />
      <!--作者名 -->
      <h3>{{ details.writer }}</h3>
      <!-- 作者介绍 -->
      <p>
        儿童发展心理学家，美国亚拉尼大学心理学教授。她为家和老师们设计的一套“我能解决问题”训练计划，以及她和治·斯派维克(George,Spivack)一起所做出的开创性究，为她荣获了四项国家级大奖：一项美国心理健康协会奖(1982年)、三项美国心理学协会大奖(1984年、1986年、1994年)。
        她还是心健康和预防青少年行为问题方媒体顾问。
      </p>
    </div>
    <!-- 书籍内容 -->
    <div>
      <p>
        儿童发展心理学家，美国亚拉尼大学心理学教授。她为家和老师们设计的一套“我能解决问题”训练计划，以及她和治·斯派维克(George,Spivack)一起所做出的开创性究，为她荣获了四项国家级大奖：一项美国心理健康协会奖(1982年)、三项美国心理学协会大奖(1984年、1986年、1994年)。
        她还是心健康和预防青少年行为问题方媒体顾问。
      </p>
      <p>
        儿童发展心理学家，美国亚拉尼大学心理学教授。她为家和老师们设计的一套“我能解决问题”训练计划，以及她和治·斯派维克(George,Spivack)一起所做出的开创性究，为她荣获了四项国家级大奖：一项美国心理健康协会奖(1982年)、三项美国心理学协会大奖(1984年、1986年、1994年)。
        她还是心健康和预防青少年行为问题方媒体顾问。
      </p>
      <p>
        儿童发展心理学家，美国亚拉尼大学心理学教授。她为家和老师们设计的一套“我能解决问题”训练计划，以及她和治·斯派维克(George,Spivack)一起所做出的开创性究，为她荣获了四项国家级大奖：一项美国心理健康协会奖(1982年)、三项美国心理学协会大奖(1984年、1986年、1994年)。
        她还是心健康和预防青少年行为问题方媒体顾问。
      </p>
      <p>
        儿童发展心理学家，美国亚拉尼大学心理学教授。她为家和老师们设计的一套“我能解决问题”训练计划，以及她和治·斯派维克(George,Spivack)一起所做出的开创性究，为她荣获了四项国家级大奖：一项美国心理健康协会奖(1982年)、三项美国心理学协会大奖(1984年、1986年、1994年)。
        她还是心健康和预防青少年行为问题方媒体顾问。
      </p>
      <p>
        儿童发展心理学家，美国亚拉尼大学心理学教授。她为家和老师们设计的一套“我能解决问题”训练计划，以及她和治·斯派维克(George,Spivack)一起所做出的开创性究，为她荣获了四项国家级大奖：一项美国心理健康协会奖(1982年)、三项美国心理学协会大奖(1984年、1986年、1994年)。
        她还是心健康和预防青少年行为问题方媒体顾问。
      </p>
    </div>
  </div>
  <!-- toogle切换按钮    点击修改响应式数据,同时设置状态,根据状态判断显示的按钮文字-->
  <div @click="addClass" class="toogle-btn">
    <span v-if="!heightStatus">点击查看全部</span>
    <span v-else>收起</span>
  </div>
  <!-- 家长课 -->
  <div class="jiazhang">
    <!-- 模块标题 -->
    <div class="head">家长课</div>
    <div class="items">
      <img :src="recommended.list[0].imgUrl" alt="" />
      <div class="info">
        <h4>{{ recommended.list[0].title }}</h4>
        <p>{{ recommended.list[0].text }}</p>
      </div>
    </div>
  </div>
  <!-- 相关推荐 -->
  <div class="tuijian">
    <!-- 模块标题 -->
    <div class="head">相关推荐</div>
    <div class="items" v-for="(item, index) in recommended.list" :key="index">
      <img :src="item.imgUrl" alt="" />
      <div class="info">
        <div class="top">
          <h4>{{ item.title }}</h4>
          <p>{{ item.text }}</p>
        </div>
        <div class="func">
          <p>播放量{{ item.plays }}</p>
          <span class="button"><i></i>听书</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, ref } from "vue";
import { getMoretuiApi, getDetailsApi } from "../../utils/api";
export default {
  props: ["id"],
  setup() {
    const heightStatus = ref(false); //0闭合,1开启
    const value = ref(0);
    const details = reactive([]);
    const height = ref("600px");
    // 修改此处的值页面会立即渲染改变的地方.
    const addClass = () => {
      heightStatus.value = !heightStatus.value;
      if (heightStatus.value == false) {
        height.value = "600px";
      } else {
        height.value = "auto";
      }
    };
    //商品信息
    const goods = reactive({
      list: [
        {
          imgUrl: "",
          title: "",
          text: "",
          plays: Number,
        },
      ],
    });
    // 渲染列表
    const recommended = reactive({
      list: [
        {
          imgUrl: "",
          title: "",
          text: "",
          plays: Number,
        },
      ],
    });
    //渲染推荐区域

    return {
      goods,
      value,
      height,
      heightStatus,
      addClass,
      recommended,
      details,
    };
  },
  mounted() {
    this.recommedList();
  },
  methods: {
    async recommedList() {
      const resd = await getDetailsApi({ params: { id: this.id } });
      this.details = resd.data.result[0];
      console.log(this.details);
      const res = await getMoretuiApi();
      this.recommended.list = res.data.result;
      console.log(res.data.result);
    },
  },
};
</script>

<style lang="less" scoped>
.audio-item {
  margin-top: 50px;
  /deep/.van-card {
    background: #fff;
    height: 146px;
    .van-card__header {
      .van-card__thumb {
        height: 130px;
        .van-image__img {
          width: 100px;
          height: 130px;
        }
      }
      .van-card__content {
        margin-left: 10px;
        .van-card__title {
          font-size: 16px;
          line-height: 36px;
          font-weight: 700;
          color: #000000;
        }
        .van-card__desc {
          font-weight: 600;
          color: #a9abaa;
          font-size: 12px;
        }
        .van-card__bottom {
          font-weight: 600;
          color: #0d0d0d;
          font-size: 12px;
          margin-bottom: 10px;
        }
      }
    }
  }
}
.play {
  .audio-slider {
    margin: 20px 0;
    //播放进度控制
    display: flex;
    align-items: center;
    .jump {
      display: block;
      width: 22px;
      height: 14px;
    }
    .pres15 {
      margin-left: 34px;
      background: url("../../assets/imgs/detailspage_slices/组 2.png");
      background-size: 100% 100%;
    }
    .slider {
      margin: 0 10px;
    }
    .after15 {
      background: url("../../assets/imgs/detailspage_slices/快进.png");
      background-size: 100% 100%;
      margin-right: 34px;
    }
    /deep/.van-slider__bar {
      background: #7a7a79 !important;
      .custom-button {
        width: 70px;
        color: #fff;
        font-size: 10px;
        line-height: 18px;
        text-align: center;
        background: #575654;
        border-radius: 9px;
      }
    }
  }
  .play-btn {
    ul {
      display: flex;
      li {
        color: #7c7c7c;
        flex: 1;
        font-size: 12px;
        height: 57px;
        width: 57px;
        align-items: center;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        img {
          max-width: 20px;
          max-height: 20px;
        }
      }
      .palybtn {
        img {
          max-width: 57px;
          max-height: 57px;
        }
      }
    }
  }
}
.advs {
  img {
    display: block;
    margin: 30px auto;
    width: 339px;
    height: 118px;
  }
}
.article {
  margin-top: 50px;
  overflow: hidden;
  // background: #c7c7c6;
  h1,
  h3 {
    margin: 40px 0;
    text-align: center;
  }
  h1 {
    font-weight: bold;
    color: #595959;
    font-size: 16px;
  }
  p {
    text-indent: 28px;
    margin: 30px 16px;
    font-size: 14px;
    line-height: 30px;
    letter-spacing: 2px;
  }
  img {
    display: block;
    width: 102px;
    height: 143px;
    margin: auto;
  }
  .litag {
    display: block;
    width: 18px;
    height: 18px;
    background: url("../../assets/imgs/detailspage_slices/菱形块.png");
    background-size: 100% 100%;
    margin: 40px auto;
  }
}
.toogle-btn {
  background: linear-gradient(to top, #fff, #fff, rgba(255, 255, 255, 0.5));
  position: relative;
  transform: translateY(-20px);
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: center;
  span {
    color: #f19265;
    line-height: 40px;
    font-size: 15px;
  }
}

.tuijian,
.jiazhang {
  .head {
    position: relative;
    font-size: 18px;
    color: #040404;
    line-height: 18px;
    text-indent: 20px;
    font-weight: 600;
    &:before {
      left: 0;
      top: -1;
      content: "";
      position: absolute;
      height: 20px;
      width: 7px;
      background: #f7d60a;
    }
  }
  .items {
    margin: 0 20px;
    display: flex;
    img {
      margin-right: 14px;
      width: 80px;
      height: 110px;
    }
    .info {
      h4 {
        line-height: 30px;
        font-size: 15px;
        font-weight: 600;
        color: #040404;
      }
      p {
        line-height: 20px;
        font-size: 12px;
        color: #b6b6b6;
      }
    }
  }
}
.jiazhang {
  .items {
    margin: 50px 20px;
  }
}
.tuijian {
  .items {
    margin: 20px 20px;
  }
  .info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .func {
      width: 100%;
      display: flex;
      justify-content: space-between;
      .button {
        display: flex;
        i {
          margin: 4px;
          border-radius: 50%;
          background: #ffdd47;
          width: 18px;
          height: 18px;
        }
        height: 26px;
        width: 63px;
        border-radius: 13px;
        background: #f5f6fb;
        font-size: 12px;
        font-weight: 500;
        color: #6f6d6e;
        line-height: 26px;
      }
    }
  }
}
</style>
